<template>
  <div>
    <!-- 使用vue-qrcode组件生成二维码 -->
    <qrcode :value="qrCodeData" :size="150"></qrcode>

    <!-- 添加按钮以刷新二维码 -->
    <button @click="refreshQRCode">刷新二维码</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'; // 导入Vue 3.0的功能

import VueQrcode from 'vue-qrcode';

export default {
  name:"qrCode",
  components: {
    qrcode: VueQrcode,
  },
  setup() {
    const userId = ref(123); // 替换为您的用户ID
    const qrCodeData = ref('');

    // 根据时间戳和用户ID生成二维码数据
    const generateQRCode = () => {
      const timestamp = Date.now();
      qrCodeData.value = `https://example.com/user/${userId.value}/timestamp/${timestamp}`;
    };

    // 初始化时生成二维码
    onMounted(generateQRCode);

    const refreshQRCode = () => {
      // 在这里更新二维码数据以刷新二维码
      generateQRCode();
    };

    return {
      userId,
      qrCodeData,
      refreshQRCode,
    };
  },
};
</script>
